import { Component, Vue, Emit, Prop, Ref } from "vue-property-decorator";
import { CreateElement } from "vue";
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
import '@src/modules/task/components/TaskAllotModal/TaskAllotExcutor/TaskAllotUserCalendar/TaskAllotUserCalendar.scss'
import VC from "@model/VC"
import Tag from '@model/entity/Tag/Tag'
import moment from 'moment'
import GanttChart from '@src/modules/calendar/components/vue-gantt-chart/gantt-chart.vue'
import Page from "@model/Page";
import LoginUser from '@model/entity/LoginUser/LoginUser'
import UserCard from '@src/modules/task/components/TaskAllotModal/UserCard/UserCard.tsx'
import Customer from "@model/entity/Customer";
import StateColorMap from '@model/types/StateColor'
import { safeNewDate } from '@src/util/time';
import i18n from '@src/locales'
import { getOssUrl } from '@src/util/assets'

enum TaskAllotUserMapEventEmitEnum {
  ExecutorChange = 'executorChange'
}
@Component({
  name: ComponentNameEnum.TaskAllotUserCalendar,
  components: {
    GanttChart,
    UserCard
  }
})
export default class TaskAllotUserCalendar extends VC {
  /* 显示状态 */
  @Prop() readonly show: boolean | undefined
  @Prop() readonly calendarStartTime: string | undefined
  @Prop() readonly calendarEndTime: string | undefined
  @Prop() readonly calendarUserPage: Page | undefined
  /* 客户信息 */
  @Prop() readonly customer: Customer | undefined
  /* 客户团队列表 */
  @Prop() readonly customerTags: Tag[] | undefined
  /* 是否为转派 */
  @Prop() readonly isReAllot: boolean | undefined
  /* 是否为客户负责人 */
  @Prop() readonly isCustomerManager: boolean | undefined
  /* 工单信息 */
  @Prop() readonly task: any | undefined
  /* 工作状态颜色数组 */
  @Prop() readonly stateColorMap: StateColorMap | undefined
  /* 派单形式 */
  @Prop() readonly mode: any | undefined

  /* 负责人选中变化事件 */
  @Emit(TaskAllotUserMapEventEmitEnum.ExecutorChange)
  private selectedExcutorUserChangedHandler(user: LoginUser): LoginUser {
    return user
  }

  /* 是否显示人员卡片信息 */
  private isShowUserCard: boolean = false
  private isShowSynergy: boolean = true
  /* 选择的userId */
  private userId: any
  private agendaUserCard(user: LoginUser) {
    this.userId = user.userId
    this.selectedExcutorUserChangedHandler(user)
    this.isShowUserCard = true
  }
  /** 
   * @description 关闭用户卡片
  */
  private closeUserCard() {
    this.isShowUserCard = false
  }
  /* 客户团队名称列表 */
  get customerTagNames(): string[] {
    return this.customerTags ? this.customerTags.map(tag => tag.tagName || '') : []
  }
  get GanttTime(): string[]{
    return [moment(this.calendarStartTime).format('YYYY/MM/DD HH:mm'), moment(this.calendarEndTime).format('YYYY/MM/DD HH:mm')]
  }
  render(h: CreateElement) {
    const [startTime, endTime] = this.GanttTime.map((item) => moment(item))
    let flag = startTime.isValid() && endTime.isValid() ? true : false

    const sTime = safeNewDate(this.GanttTime[0] || '').getTime();
    const eTime = safeNewDate(this.GanttTime[1] || '').getTime();
    const classContainer = sTime <= eTime ? 'task-allot-user-map-container' : '';
    // 计划开始时间和计划完成时间跨度不小于30天
    if(flag) {
      const start = this.calendarStartTime || '';
      const end = this.calendarEndTime || '';
      let time = safeNewDate(end).getTime() - safeNewDate(start).getTime()
      let flagTimeValid = time <= (1000 * 60 * 60 * 24 * 30);
      if(time < 0) {
        return (
          this.show && (
            <div class="container-none-main">
              <div class="container-none">
                <div class='no-data-image'></div>
                <div class='no-data'>{i18n.t('common.base.tip.noData')}</div>
              </div>
            </div>
          )
        )
      }
      if(flagTimeValid) {
        const basePanelAttrs = {
          on: {
            'update:show': (show: boolean) => {
              this.isShowUserCard = show
            }
          }
        }
        return (
            <div class={ComponentNameEnum.TaskAllotUserCalendar}>
              {
                this.show && (
                    <div>
                      <div class={classContainer}>
                        <gantt-chart
                            gantt-data={this.calendarUserPage?.list}
                            time-section={this.GanttTime}
                            onAgendaUserCard={(user: LoginUser) => this.agendaUserCard(user)}
                        ></gantt-chart>
                      </div>
                      <div class='task-allot-calendar-content'>
                        {this.isShowUserCard && (
                            <base-panel width='470px' show={this.isShowUserCard} {...basePanelAttrs}>
                              <user-card
                                  customer={this.customer}
                                  customerTagNames={this.customerTagNames}
                                  emitEventComponentName={ComponentNameEnum.TaskAllotExcutor}
                                  isReAllot={this.isReAllot}
                                  showSynergyButton={this.isShowSynergy}
                                  stateColorMap={this.stateColorMap}
                                  showCustomerManagerIcon={this.isCustomerManager}
                                  userId={this.userId}
                                  task={this.task}
                                  mode={this.mode}
                                  onClose={() => this.closeUserCard()}
                              />
                            </base-panel>
                        )}
                      </div>
                    </div>
                )
              }
            </div>
        ); 
      }else {
        return (
            this.show && (
              <div class="container-none">
                <div class='no-data-image image-distance'></div>
                <div class='no-data-tips'>{i18n.t('task.tip.planTimeTip1')}</div>
              </div>
            )
        );
      }
    }else {
      return (
      this.show && (
        <div class="container-none-main">
          <div class="container-none">
            <div class='no-data-image' style={`background: url(${getOssUrl('/no_data.png')}) no-repeat;`}></div>
            <div class='no-data'>{i18n.t('common.base.tip.noData')}</div>
            <div class='no-data-tips'>{i18n.t('task.tip.planTimeTip8')}</div>
          </div>
        </div>
        )
      )
    }
  }
}
